<template>
  <!-- 注册页面 -->
  <div class="header">
    <div class="headerphone">手机号注册</div>
    <div>
      <input
        v-model="dataxixi.phone"
        class="tellnumber"
        type="text"
        placeholder="手机号"
      />
    </div>
    <div class="smalltell">
      <input
        v-model="verification.berification"
        type="text"
        placeholder="短信验证码"
      />
      <button @click="Register">获取验证码</button>
    </div>
    <div>
      <input
        v-model="verification.password"
        class="tellnumber2"
        type="text"
        placeholder="密码(8-20个字符)"
      />
    </div>
    <!-- 服务条款 -->
    <div class="clause" @click="isclause">
      <div>
        <img v-show="isChang" src="../assets/未选中.png" alt="" srcset="" />
        <img v-show="!isChang" src="../assets/选中.png" alt="" srcset="" />
      </div>
      <div>阅读并同意《用户服务条款》</div>
    </div>
    <!-- 注册按钮 -->
    <div class="Registerbtn">
      <button @click="Registerto">注册</button>
    </div>
    <!-- 跳转登录 -->
    <div class="gologin">
      <div>已有账号，</div>
      <div @click="Gologin">直接登录</div>
    </div>
  </div>
</template>

<script>
import { reactive, ref } from "@vue/reactivity";
import http from "../request/Register";
import {useStore} from 'vuex'
// import axios from "axios";
export default {
  setup(props, { emit }) {
    props;
    const store=useStore()
    const isChang = ref(true);
    let isclause = () => {
      isChang.value = !isChang.value;
    };
    // 向父组件传值，跳转到登录页面
    let Gologin = () => {
      emit("callCancel");
    };
    // 密码和短信验证码
    const verification = reactive({
      password: "",
      berification: "",
    });
    const dataxixi = reactive({
      // 账号
      phone: "",
      type: "1",
    });
    // 获取验证码
    let Register = () => {
      if (!isChang.value) {
        http
          .get("/sendSms", { params: dataxixi })
          .then((res) => {
            console.log(res, "请求成功");
            alert("验证码发送成功!");
          })
          .catch((res) => {
            console.log(res, "请求失败");
          });
      } else {
        alert("请先同意《用户条款》!");
      }
    };
    // 注册按钮
    let Registerto = () => {
      if (!isChang.value) {
        // axios
        //   .get("http://h5.ycyy.club/mobile-api/app/login", {
        //     headers: {
        //       "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
        //     },
        //     dataType: "jsop",
        //     withCredentials: false,
        //     data: {
        //       phone: dataxixi.phone,
        //       type: dataxixi.type,
        //       code: verification.berification,
        //       password: verification.password,
        //     },
        //   })
        //   .then((res) => {
        //     console.log(res);
        //   })
        //   .catch((res) => {
        //     console.log(res, "注册失败");
        //   });
          store.commit('adduser',{
            phone:dataxixi.phone,
            password:verification.password
          })
          emit('callCancel')
      }
      else{
        alert('请先勾选《用户服务条款》!')
      }
    };
    return {
      isChang,
      dataxixi,
      verification,
      isclause,
      Gologin,
      Register,
      Registerto,
    };
  },
};
</script>

<style scoped>
.header {
  z-index: 999;
  width: 368px;
  height: 388px;
  background: rgb(255, 255, 255);
  position: fixed;
  border: 1px #e2e0e0 solid;
  border-radius: 13px;
  top: 20%;
  left: 40%;
}
.headerphone {
  text-align: center;
  font-size: 21px;
  font-weight: 100;
  margin-top: 40px;
}
/* 手机号 */
.tellnumber {
  margin-top: 20px;
  margin-left: 30px;
  width: 290px;
  height: 42px;
  font-size: 14px;
  border: 1px #888888 solid;
  padding-left: 10px;
  outline: none;
}
/* 短信验证码 */
.smalltell {
  display: flex;
  margin-left: 30px;
  margin-top: 10px;
}
.smalltell > :nth-child(1) {
  height: 39px;
  width: 200px;
  padding-left: 10px;
  outline: none;
}
.smalltell > :nth-child(2) {
  width: 89px;
  height: 43px;
  background: white;
  border: 1px #888888 solid;
  margin-left: -1px;
  cursor: pointer;
}
/* 密码 */
.tellnumber2 {
  margin-top: 10px;
  margin-left: 30px;
  width: 290px;
  height: 42px;
  font-size: 14px;
  border: 1px #888888 solid;
  padding-left: 10px;
  outline: none;
}
.clause {
  display: flex;
  margin-left: 30px;
  margin-top: 10px;
}
.clause > :nth-child(1) {
  cursor: pointer;
}
.clause > :nth-child(2) {
  margin-left: 7px;
  color: #888888;
  margin-top: -1px;
}
/* 注册 */
.Registerbtn > :nth-child(1) {
  margin-top: 10px;
  margin-left: 30px;
  width: 302px;
  height: 42px;
  font-size: 14px;
  border: 1px #333333 solid;
  background: #333333;
  color: white;
  font-size: 18px;
  cursor: pointer;
}
/* 跳转登录 */
.gologin {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  margin-right: 38px;
}
.gologin > :nth-child(1) {
  color: #888888;
}
.gologin > :nth-child(2) {
  color: #000000;
  cursor: pointer;
}
</style>